Sigma Web Development

📒 Notes & Demo: CSS Display Property

🔗 Further reading: MDN “display” property reference

• 1. display: inline

  Inline elements flow with text and ignore height/width.

  .box-inline { display: inline; }

  Hinglish: Ye element text ke saath line mein flow hota hai. Width/height ignore hota hai, sirf horizontal padding thoda dikh sakta hai.

  Inline A
  Inline B

• 2. display: inline-block

  Inline-block respects box properties and flows inline.

  .box-inline-block { display: inline-block; }

  Hinglish: Inline ki tarah line mein aata hai, lekin width, height, padding/margin sab apply hote hain.

  Inline-block A
  Inline-block B

• 3. display: block

  Block elements start on a new line and take full width by default.

  .box-block { display: block; }

  Hinglish: Har box new line se start hota hai, default full width leta hai, aur saari box properties support hoti hain.

  Block A
  Block B

• 4. display: none

  Element is not rendered; takes no space in layout.

  .box-none { display: none; }

  Hinglish: Ye element bilkul page se hat jata hai — na dikhta hai, na space leta hai.

  You can't see me

• 5. visibility: hidden

  Element is invisible but still takes up space.

  .box-hidden { visibility: hidden; }

  Hinglish: Ye invisible hai, par layout mein apni jagah bana ke rakhta hai. Invisible friend samjho jo wahan hai par nazar nahi aata.

  Hidden A
  Hidden B